<script setup lang="ts">
import JuejinBanner from './juejinBanner.vue'
import SvgIcon from './SvgIcon.vue'
import SigninTip from './signinTip.vue'
import JuejinSkeletonHot from './juejinSkeletonHot.vue'
import JuejinSkeletonAuthors from './juejinSkeletonAuthors.vue'
import ListBoxHotTheme from './listBoxHotTheme.vue'
import AsideFoot from './asideFoot.vue'
import { ref } from 'vue'
const JuejinSkeletonHotgetdata = ref()

const useJuejinSkeletonHotgetdata = () => {
  if (JuejinSkeletonHotgetdata.value) {
    JuejinSkeletonHotgetdata.value.getdata()
  }
}

defineExpose({
  useJuejinSkeletonHotgetdata,
})






</script>

<template>
  <aside class="body-right-aside">
    <SigninTip />
    <div class="hot-list-container">
      <div class="hot-list-item">
        <div class="hot-item-header">
          <div class="hot-title">
            <img
              src="../assets/img/wz.png"
              type="icon"
              alt="icon"
              class="hot-icon"
            />
            <span title="文章榜" class="title-text"> 文章榜 </span>
          </div>

          <div class="item-header-button">
            <SvgIcon name="ItemHeaderButton" size="16px" />

            <span class="text" @click="useJuejinSkeletonHotgetdata"
              >换一换</span
            >
          </div>
        </div>
        <div class="divider" style="margin-bottom: 4px">
          <div class="content"></div>
        </div>
        <ul class="hot-item-body">
          <JuejinSkeletonHot ref="JuejinSkeletonHotgetdata" />
        </ul>

        <div class="divider" style="margin-top: 4px">
          <div class="content"></div>
        </div>

        <div class="hot-item-footer">
          <a href="/hot/articles/1" class="item-footer-button" target="_blank">
            <span>查看更多</span>
            <SvgIcon name="DmxRightSvg" size="10" />
          </a>
        </div>
      </div>
    </div>

    <JuejinBanner  />

    <div class="hot-list-container">
      <div class="hot-list-item">
        <div class="hot-item-header">
          <div class="hot-title">
            <img
              src="../assets/img/zz.png"
              type="icon"
              alt="icon"
              class="hot-icon"
            />
            <span title="作者榜" class="title-text"> 作者榜 </span>
          </div>

          <!-- <div class="item-header-button">
            <SvgIcon name="ItemHeaderButton" size="16px" />
            <span class="text">换一换</span>
          </div> -->
        </div>
        <div class="divider" style="margin-bottom: 4px">
          <div class="content"></div>
        </div>
        <ul class="hot-item-body">
          <JuejinSkeletonAuthors />
        </ul>

        <div class="divider" style="margin-top: 4px">
          <div class="content"></div>
        </div>

        <div class="hot-item-footer">
          <a href="/hot/articles/1" class="item-footer-button" target="_blank">
            <span>查看更多</span>
            <SvgIcon name="DmxRightSvg" size="10" />
          </a>
        </div>
      </div>
    </div>

    <ListBoxHotTheme />

    <AsideFoot />
  </aside>
</template>

<style lang="scss" scoped>
.hot-list-container {
  .hot-list-item {
    padding: 12px 8px;
    background-color: #fff;
    margin-bottom: 1.66rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 4px;
    .hot-item-header {
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      align-items: center;
      padding: 0 8px;
      .hot-title {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #252933;
        img {
          width: 1.66rem;
          height: 1.66rem;
          line-height: 0;
          margin-right: 0.66rem;
        }
        .title-text {
          font-weight: 500;
          font-size: 16px;

          line-height: 24px;
          display: flex;
          flex-direction: row;
          align-items: center;
          color: #252933;
        }
      }

      .item-header-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        user-select: none;
        cursor: pointer;

        .text {
          margin-left: 4px;
          color: #8a919f;
        }
        &:hover .text,
        &:hover svg {
          color: #1e80ff !important;
          fill: #1e80ff !important ;
        }
      }
    }

    .divider {
      width: 100%;
      height: 1px;
      box-sizing: border-box;
      .content {
        margin: 0 8px;
        height: 100%;
        background: rgba(228, 230, 235, 0.5);
      }
    }

    .hot-item-body {
      min-height: 7rem;
    }

    .hot-item-footer {
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .item-footer-button {
        font-size: 14px;
        color: #8a919f;
        line-height: 1.66rem;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
}
</style>
